| 前端css技巧、uniapp笔记等 | 您所在的位置：网站首页 › uniapp h5开发 › 前端css技巧、uniapp笔记等 |
|
工作部分笔记 1.文本的多种省略号以及换行方法**1.单行文本加省略号 overflow: hidden;//溢出隐藏 white-space: nowrap;//禁止换行 text-overflow: ellipsis;//...2.多行文本换行加省略号 display: -webkit-box;//谷歌 -webkit-box-orient: vertical; -webkit-line-clamp: 3;//显示几行 overflow: hidden;3.英文自动换行 word-wrap:break-word; word-break:break-all;4.Vue中实现鼠标移入，省略号的内容全部显示： (1) elementui实现 {{item.title}} //改为： //法1 {{item.title}} //悬浮层显示全部内容//法2 {{item.title}} (2)table表格 //:show-overflow-tooltip="true" //悬浮层显示全部内容 5、html实现省略号全部显示： 11111 //title属性（title的内容与该内容相同）悬浮层显示全部内容 5、css实现省略号全部显示： 设置:hover h4{ overflow: hidden;//溢出隐藏 white-space: nowrap;//禁止换行 text-overflow: ellipsis;//... } h4:hover{ width:200px; overflow: visible; white-space: pre-line; cursor:pointer; } 2.兼容h5端的点击复制到手机粘贴板的方法 function copyTxt(txt) {//传入要复制的内容 txt+=""; if(txt=="null"||txt=="undefined"||txt==""){ //toast("复制失败，内容为空"); return; } // #ifdef APP-PLUS uni.setClipboardData({ data:txt, }); // #endif // #ifdef H5 if (document.queryCommandSupported('copy')) { let textarea = document.createElement("textarea") textarea.value = txt textarea.readOnly = "readOnly" document.body.appendChild(textarea) textarea.select() // 选中文本内容 textarea.setSelectionRange(0, txt.length) let result = document.execCommand("copy") textarea.remove() uni.showToast({ title:'复制成功', icon:'none' }) }else{ uni.showToast({ title:'复制失败', icon:'none' }) } // #endif } export default { copyTxt, } 3.修改uni-ui的样式style标签上加scoped，同时使用 deep 穿透 可以成功修改 /deep/ .uni-combox__input { font-size: 14px; } 4.隐藏uniapp的scroll滚动条 /* 解决滚动条的问题 */ ::-webkit-scrollbar{ display: none; } /* 解决H5 的问题 */ uni-scroll-view .uni-scroll-view::-webkit-scrollbar { /* 隐藏滚动条，仍然可以滚动 */ display: none } 5.解决英文不会自动换行问题 word-break:break-all; 6.jQuery给a标签的链接加参数 var urll = window.location.search; $(".urls").click(function () { $(".urls").attr("href", "https://enjoysoft.021city.cn/downloadGuide" + urll); }); 7.uniapp手机号校验（@blur） 电话： blur1(reg_tel){ console.log("blur事件被执行了",reg_tel) // blur事件被执行了 if (reg_tel === '') { callback1(new Error('手机号不可为空')); } else { if (reg_tel !== '') { var reg=/^1[3456789]\d{9}$/; if(!reg.test(reg_tel)){ callback(new Error('请输入有效的手机号码')); } } // callback(); } function callback1(Error){ console.log("name",Error); uni.showModal({ title: '手机号码不能为空', }); } function callback(Error){ console.log("name",Error); uni.showModal({ title: '请输入有效的手机号码', }); } }, 8.uniapp判断当前环境是ios还是android uni.getSystemInfoSync().platform == 'ios'; uni.getSystemInfoSync().platform == 'android' 9.原生与h5互相调用方法H5与原生APP交互 - 掘金 (juejin.cn) 原生调用H5示例： // H5 window.sdk= { double = value => value * 2 trible = value => value * 3 } //总结 首先是我们给app端定义方法供他们使用(以vue为例) methods中定义一个方法名称 VContent() { console.log("给app用的方法") }, //接着我们将这个方法在生命周期中挂载到window即可，没错，就是这么简单 mounted(){ window.VerifyContent = this.VerifyContent; }, // 原生（以IOS端为例） NSString *func = @"window.sdk.double(10)"; NSString *str = [webview stringByEvaluatingJavaScriptFromString:func];// 20 H5调用原生示例： // 原生（以IOS端为例） @interface AppSdk : NSObject {} - (int) double:(int)value; - (int) triple:(int)value; @end @implementation AppSdk - (int) double:(int)value { return value * 2; } - (int) triple:(int)value { return value * 3; } @end JSContext *context=[webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; AppSdk *appSdk = [AppSdk new]; context[@"appSdk"] = appSdk; H5： window.appSdk.double(10); // 20 10.z-paging一个uni-app (opens new window)分页组件。 全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等。 官网： 介绍 | z-paging 11.uniapp 空格怎么打{{' '}} 直接打空格 12.格式化日期时间 getDate().toLocaleString('lt-LT').slice(0,-3) //YYYY-MM-DD HH:MM 格式 new Date().toLocaleDateString() //YYYY/MM/DD 格式 new Date().toLocaleString('lt-LT')// YYYY-MM-DD HH:MM:SS 格式 '2020-01-01 00:00:00'.substring(0,10) //切割日期时间 13.获取一个月后的时间 //此方法存在问题，慎用 var date=new Date(); date.setMonth(date.getMonth()+1); var y = date.getFullYear(); var m = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1); var d = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate(); var h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours() var f = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes() var s = date.getSeconds() < 10 ? ('0' + date.getseconds()) : date.getSeconds() var formatwdate = y+'-'+m+'-'+d + " " + h + ":" + f + ":" + s; console.log('formatwdate', formatwdate) //以时间戳形式加30天 var nS=new Date().getTime(); //一个月后的时间戳 nS=nS+2592000000; nS=new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ") console.log(nS); 14.时间戳 一小时的时间戳 3,600,000 一天的时间戳 86400000 一个月的时间戳 2592000000 一年的时间戳 31104000000 当前时间戳 Date.now() 15.报错时返回报错信息并替换报错信息进行后面的程序 try{ // console.log(123); return window.action.getToken() } catch(err){ // console.log(234); return '' } } 16.根据所需目标遍历json数据，并且根据当前所选的目标返回当前目标所在的其他键值对并以字符串形式返回，主要用于根据地区编码返回地区名称（根据需求自己改动）使用的方法 {{item.disasterDamageAddress.indexOf('-')===-1?$findJson.valueFind($findJson.positions(), item.disasterDamageAddress, 'code', 'value'):item.disasterDamageAddress}} //根据键值循环遍历多层json数据 export default { /* json参数为数组对象,必传; value参数为要查找的值,必传; key参数为要查找的值的键名,必传; newKey参数查找当前所在位置的某个键名,必传; msg参数为json是空值时的提示语句; */ valueFind(json, value, key, newKey, msg) { msg = msg ? msg : '地区失效'; if (json.length < 1 || json === null || json === '') { uni.showToast({ icon: "error", title: msg }) } let num = 0; let areaArr = []; let areaStr = ''; let arrValue = value.split(','); callbackFn(); function callbackFn() { json.forEach((val, index) => { if (val[key] == arrValue[num]) { areaArr.push(val[newKey]) num++; json = val.children; callbackFn(); } }) } areaStr = areaArr.join('-'); return areaStr; }, //获取已经存在globalData中的地区数据 positions() { return getApp().globalData.areaLevel; } } 17.uniapp小坑总结1.组件内引入图片要使用绝对路径。/static/...； 2.主页面的生命周期用onLoad代替created，onReady代替mounted。组件内使用原来的created与mounted； 3.阻止事件冒泡时要在外层加一层标签，直接在需要使用的方法上加.stop无效； 4.中最好写一个写样式，而不是在picker上加样式； 5.中写position: fixed，在ios下会有兼容性问题； 6.出现遮罩后阻止页面滚动，可以在遮罩的touchmove事件中阻止默认事件。@touchmove.prevent=""； 7.一定要给高度才会生效，一般是动态获取里面的元素或列表高度再赋值给 18.uniapp滚动条自定义 ::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px !important; height: 1px !important; overflow: auto !important; background: #ccc !important; -webkit-appearance: auto !important; display: block; } /deep/ ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 10px !important; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; background: #7b7979 !important; } /deep/ ::-webkit-scrollbar-track { /*滚动条里面轨道*/ // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important; // border-radius: 10px !important; background: #FFFFFF !important; } 19.uniapp监测物理键返回 onBackPress() { //console.log("press back"); uni.showModal({ title: '退出该页面后将关闭此次轨迹记录', confirmText: '退出', success: function(res) { if (res.confirm) { .....//此处把你退出后需要的方法写上就行 this.stopGetLocation(); this.started = false; this.imgpath = '../../static/open.png' } }.bind(this)//此处bind是关键，可以箭头函数 }) }, 20.uniapp实现双击底部tabbar触发下拉刷新并震动的效果 //点击tabbat事件 onTabItemTap(e) { // tab 点击时执行，此处直接接收单击事件 if (this.tabClick) { // 200ms 内再次点击 // 这里就是模拟的双击事件，可以写类似数据刷新相关处理 // #ifdef APP-PLUS //因为ios不支持短震动，所以只在Android支持双击震动效果 if (this.$u.os() === 'android') { uni.vibrateShort(); } // #endif this.getTreeList() this.getAdvertJoinList() this.$refs.paging.reload(true); } this.tabClick = true setTimeout(() => { this.tabClick = false // 200ms 内没有第二次点击，就当作单击 }, 200) }, 21.watch的多种操作 watch:{ //单独监听对象里的某个元素 "show.showPop": { handler(newValue) { } }, //监听简单类型数据 demo(oldVal,newVal){ }, /** 深度监听复杂数据类型 handler：其值是一个回调函数。监听到变化时应该执行的函数。 deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值 变化可以听到。） immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，此时需要deep属性对对象 进行深度监听 **/ obj: { handler(newValue, oldValue) { console.log("obj 发生了变化"); }, deep: true, immediate: true }, }, 22.当图片宽度为百分比时图片高度等于图片的宽度的方法 left { position: relative; width: 20%; height: 0; padding-top: 20%; image { width: 100%; height: 100%; top: 0; left: 0; position: absolute; } } |
| CopyRight 2018-2019 实验室设备网 版权所有 |